<template>
	<el-dialog v-model="dialogVisible" @closed="resetForm(ruleFormRef)" :show-close="false" width="500px" draggable>
		<span></span>
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<div class="header-title">
					<h4 :id="titleId" :class="titleClass">修改密码</h4>
					<p>修改成功后会自动退出当前登录!</p>
				</div>
				<el-icon style="cursor: pointer" @click="close" class="el-icon--left"><CircleCloseFilled /></el-icon>
			</div>
		</template>
		<el-form ref="ruleFormRef" :model="user" :rules="rules" label-width="80px">
			<el-form-item label="旧密码" prop="oldPassword">
				<el-input v-model="user.oldPassword" placeholder="请输入旧密码" :type="isPassword1 ? '' : 'password'" />
				<Hide class="tipsIcon tipsIcon-rt" v-if="!isPassword1" @click="showPwd(isPassword1, 1)" />
				<View class="tipsIcon tipsIcon-rt" v-else @click="showPwd(isPassword1, 1)" />
			</el-form-item>
			<el-form-item label="新密码" prop="newPassword">
				<el-input v-model="user.newPassword" placeholder="请输入新密码" :type="isPassword2 ? '' : 'password'" />
				<Hide class="tipsIcon tipsIcon-rt" v-if="!isPassword2" @click="showPwd(isPassword2, 2)" />
				<View class="tipsIcon tipsIcon-rt" v-else @click="showPwd(isPassword2, 2)" />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input v-model="user.confirmPassword" placeholder="请确认密码" :type="isPassword3 ? '' : 'password'" />
				<Hide class="tipsIcon tipsIcon-rt" v-if="!isPassword3" @click="showPwd(isPassword3, 3)" />
				<View class="tipsIcon tipsIcon-rt" v-else @click="showPwd(isPassword3, 3)" />
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="resetForm(ruleFormRef)">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";
import api from "@/api/modules/permissionmanagement";
import { LOGIN_URL } from "@/config/config";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import md5 from "js-md5";
const router = useRouter();
const dialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const globalStore = GlobalStore();
const isPassword1 = ref<boolean>(false);
const isPassword2 = ref<boolean>(false);
const isPassword3 = ref<boolean>(false);
const showPwd = (bool: boolean, num: number) => {
	if (num == 1) {
		isPassword1.value = !bool;
		return;
	}
	if (num == 2) {
		isPassword2.value = !bool;
		return;
	}
	isPassword3.value = !bool;
};
const user = ref<any>({
	oldPassword: undefined,
	newPassword: undefined,
	confirmPassword: undefined
});
const equalToPassword = (rule: any, value: any, callback: any) => {
	console.log(rule);
	if (user.value.newPassword !== value) {
		callback(new Error("两次输入的密码不一致"));
	} else {
		callback();
	}
};
// 表单校验
const rules: FormRules = {
	oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
	newPassword: [
		{ required: true, message: "新密码不能为空", trigger: "blur" },
		{
			pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,})$/,
			message: "请输入6-20位的包含字母与数字的密码！",
			trigger: "blur"
		},
		{ min: 6, max: 20, message: "请输入6-20位的包含字母与数字的密码！", trigger: "blur" }
	],
	confirmPassword: [
		{ required: true, message: "确认密码不能为空", trigger: "blur" },
		{ required: true, validator: equalToPassword, trigger: "blur" }
	]
};
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			// 1.发起修改密码请求
			let { result } = await api.UpdateUserInfoPassWordApi({
				id: globalStore.userInfo.id, //用户Id
				oldPassWord: md5(user.value.oldPassword).toUpperCase(), //原密码
				newPassWord: md5(user.value.confirmPassword).toUpperCase() //新密码
			});
			if (result.code == 412) {
				ElMessage.error(result.message);
				return;
			}
			// 2.清空用户登录数据，返回登录页
			globalStore.setToken("");
			localStorage.clear();
			// 3.重定向到登陆页
			router.replace(LOGIN_URL);
			ElMessage.success("修改密码成功！");
		} else {
			console.log("error submit!", fields);
		}
	});
};
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	dialogVisible.value = false;
};
// openDialog
const openDialog = () => {
	dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	h4 {
		margin: 10px 0;
	}
	p {
		font-size: 14px;
		color: #888;
	}
}
.tipsIcon {
	position: absolute;
	top: -5px;
	left: 15px;
	z-index: 1;
	height: 46px;
	width: 20px;
}

.tipsIcon-rt {
	left: inherit;
	right: 15px;
	cursor: pointer;
	width: 16px;
}
</style>
